<template>
   <div class="app-container">
   <form-level-filter @on-filter="submitFilterForm"/>
    <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column prop="createTime" label="调整时间">
        <template slot-scope="{row}">{{row.createTime | toTime}}</template>
      </el-table-column>
      <el-table-column label="调整前" prop="optBeforeData">
      </el-table-column>
      <el-table-column label="调整后" prop="optData">
      </el-table-column>
      <el-table-column label="调整方式" prop="optDesc">
      </el-table-column>
       <el-table-column label="调整人" prop="creator">
      </el-table-column>
  <el-table-column label="锁定状态" width="120" prop="lockStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.lockStatus === 1" type="warning">已锁定</el-tag>
          <el-tag v-else type="success">未锁定</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { grid } from '@/build';
import { getMemberLevelLogs } from '@/services/api/member';
import formLevelFilter from './formLevelFilter';

export default {
  name: 'user-level-logs',
  mixins: [grid],
  components: {
    formLevelFilter,
  },
  data() {
    const monthTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      tableData: [],
      filters: {
        userId: this.$store.state.member.member_info.id,
        page: 1,
        size: 20,
        sTime: monthTime[0],
        eTime: monthTime[1],
        optType: -1,
      },
    };
  },
  methods: {
    submitFilterForm(formInline) {
      const {
        time, optType, creator,
      } = formInline;
      let sTime; let
        eTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        sTime = time[0];
        eTime = time[1];
        formInline = {
          ...formInline, sTime, eTime,
        };
      } else {
        this.filters.sTime = undefined;
        this.filters.eTime = undefined;
      }
      this.filters = {
        ...this.filters, sTime, eTime, optType, creator,
      };
      this.gridSearch();
    },
  },

  mounted() {
    this.bindGet(getMemberLevelLogs, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .el-card-header {
    padding-bottom: 20px;

    .total-wrap {
      padding: 5px;
      line-height: 2;

      strong {
        display: inline-block;
        text-align: right;
        width: 100px;
        font-size: 14px;
      }

      .total-item {
        font-size: 14px;
        padding: 0 5px;
        display: inline-block;
        min-width: 120px;
      }
    }
  }
</style>
